<template>
	<el-dialog v-model="visible" :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false">
		<el-form
			ref="dataFormRef"
			v-loading="loading"
			:model="dataForm"
			:rules="dataRules"
			label-position="top"
			label-suffix="："
			@keyup.enter="submitHandle()"
		>
			<el-form-item v-if="dataForm.id" label="项目编码" prop="projectCode">
				<el-input v-model="dataForm.projectCode" placeholder="项目编码" :disabled="dataForm.id"></el-input>
			</el-form-item>
			<el-form-item label="项目名称" prop="projectName">
				<el-input v-model="dataForm.projectName" placeholder="项目名称"></el-input>
			</el-form-item>
			<el-form-item label="产业分类" prop="industryCategory">
				<ma-dict-select v-model="dataForm.industryCategory" dict-type="industry_category" clearable placeholder="产业分类"></ma-dict-select>
			</el-form-item>
			<el-form-item label="项目建设内容" prop="constructionContent">
				<el-input v-model="dataForm.constructionContent" type="textarea"></el-input>
			</el-form-item>
			<el-form-item label="项目计划总投资（万元）" prop="plannedInvestment">
				<el-input-number
					v-model="dataForm.plannedInvestment"
					:min="0"
					controls-position=""
					placeholder="项目计划总投资"
					:precision="2"
					size="default"
				/>
			</el-form-item>
			<el-form-item label="项目投资方名称" prop="investorName">
				<el-input v-model="dataForm.investorName" placeholder="项目投资方名称"></el-input>
			</el-form-item>
			<el-form-item label="项目联系人姓名" prop="contactName">
				<el-input v-model="dataForm.contactName" placeholder="姓名"></el-input>
			</el-form-item>
			<el-form-item label="项目联系人电话" prop="contactPhone">
				<el-input v-model="dataForm.contactPhone" placeholder="手机号"></el-input>
			</el-form-item>
			<el-form-item label="本周进度" prop="weeklyProgress">
				<el-input v-model="dataForm.weeklyProgress" type="textarea"></el-input>
			</el-form-item>
			<el-form-item label="包联领导" prop="linkedLeader">
				<el-input v-model="dataForm.linkedLeader" placeholder="姓名"></el-input>
			</el-form-item>
			<el-form-item label="包联领导电话" prop="linkedLeaderPhone">
				<el-input v-model="dataForm.linkedLeaderPhone" placeholder="手机号"></el-input>
			</el-form-item>
			<el-form-item label="包联单位" prop="linkedDepartment">
				<el-input v-model="dataForm.linkedDepartment" placeholder="包联单位"></el-input>
			</el-form-item>
			<el-form-item label="包联单位项目负责干部" prop="projectLeader">
				<el-input v-model="dataForm.projectLeader" placeholder="姓名"></el-input>
			</el-form-item>
			<el-form-item label="包联单位项目负责干部联系方式" prop="leaderPhone">
				<el-input v-model="dataForm.leaderPhone" placeholder="手机号"></el-input>
			</el-form-item>
			<el-form-item label="备注" prop="remark">
				<el-input v-model="dataForm.remark" type="textarea"></el-input>
			</el-form-item>
		</el-form>
		<template #footer>
			<el-button @click="visible = false">取消</el-button>
			<el-button type="primary" :disabled="loading" @click="submitHandle()">确定</el-button>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus/es'
import { useInfoApi, useInfoSubmitApi } from '@/api/project/info'

const emit = defineEmits(['refreshDataList'])
const loading = ref(false)
const visible = ref(false)
const dataFormRef = ref()

const dataForm = reactive({
	id: '',
	projectCode: '',
	projectName: '',
	constructionContent: '',
	plannedInvestment: '',
	investorName: '',
	contactName: '',
	contactPhone: '',
	industryCategory: '',
	linkedLeader: '',
	linkedLeaderPhone: '',
	projectLeader: '',
	leaderPhone: '',
	linkedDepartment: '',
	weeklyProgress: '',
	remark: ''
})

const init = (id?: number) => {
	visible.value = true
	dataForm.id = ''

	// 重置表单数据
	if (dataFormRef.value) {
		dataFormRef.value.resetFields()
	}

	if (id) {
		getInfo(id)
	}
}

const getInfo = (id: number) => {
	loading.value = true
	useInfoApi(id)
		.then(res => {
			Object.assign(dataForm, res.data)
		})
		.finally(() => {
			loading.value = false
		})
}

const dataRules = ref({
	projectName: [{ required: true, message: '必填信息', trigger: 'blur' }],
	investorName: [{ required: true, message: '必填信息', trigger: 'blur' }],
	contactName: [{ required: true, message: '必填信息', trigger: 'blur' }],
	contactPhone: [{ required: true, message: '必填信息', trigger: 'blur' }],
	linkedLeader: [{ required: true, message: '必填信息', trigger: 'blur' }],
	linkedLeaderPhone: [{ required: true, message: '必填信息', trigger: 'blur' }],
	linkedDepartment: [{ required: true, message: '必填信息', trigger: 'blur' }],
	projectLeader: [{ required: true, message: '必填信息', trigger: 'blur' }],
	leaderPhone: [{ required: true, message: '必填信息', trigger: 'blur' }],
	weeklyProgress: [{ required: true, message: '必填信息', trigger: 'blur' }],
	industryCategory: [{ required: true, message: '必填信息', trigger: 'blur' }]
})

// 表单提交
const submitHandle = () => {
	dataFormRef.value.validate((valid: boolean) => {
		if (!valid) {
			return false
		}
		loading.value = true
		useInfoSubmitApi(dataForm)
			.then(() => {
				ElMessage.success({
					message: '操作成功',
					duration: 500,
					onClose: () => {
						visible.value = false
						emit('refreshDataList')
					}
				})
			})
			.finally(() => {
				dataFormRef.value.resetFields()
				loading.value = false
			})
	})
}

defineExpose({
	init
})
</script>
<style scoped lang="scss">
:deep(.el-input-number) {
	min-width: 35%;
}
</style>
